<script setup lang="ts">
import CardTitle from './components/card-title.vue';
import screenTitle from './components/screen-title.vue';
import t from './view/t.vue';
import v from './view/v.vue';
import m from './view/m.vue';
import { BorderBox7, Decoration11, FullScreenContainer } from '@kjgl77/datav-vue3';
import MapContainer from './view/MapContainer.vue';

document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("文档已退出全屏模式"))
      .catch((err) => console.error(err));
    reSize()

  } else {
    document.documentElement.requestFullscreen();
    reSize()
  }
};

// 监听屏幕尺寸变化
new ResizeObserver(reSize).observe(document.documentElement);

function reSize() {
  setTimeout(() => {
    const scale = Math.min(
      document.documentElement.clientWidth / 1920,
      document.documentElement.clientHeight / 1080
    );
    document.documentElement.style.setProperty('--scale', scale.toString());
  }, 100);
}
</script>

<template>
  <div class="scale-box wh">
    <!-- <FullScreenContainer> -->
    <div class="wh col box" style="padding: 20px 22px;">
      <div>
        <screen-title :width="290" :font-size="30" text="智慧监控大屏"></screen-title>
      </div>
      <div class="flex flex-1 gap12">
        <div class="w-346 col justify-between">
          <BorderBox7 class="col" style="height: 309px;background-color: #001925;">
            <t></t>
          </BorderBox7>
          <BorderBox7 class="col" style="height: 309px;background-color: #001925;">
            <v />
          </BorderBox7>
          <BorderBox7 class="col" style="height: 314px;background-color: #001925;"></BorderBox7>
        </div>
        <div class="w-1160 col justify-between">
          <BorderBox7 class="col" style="height: 642px;background-color: #001925;">
            <!-- <m></m> -->
            <MapContainer></MapContainer>
          </BorderBox7>
          <BorderBox7 class="col" style="height: 314px;background-color: #001925;"></BorderBox7>

        </div>
        <div class="w-346 col justify-between">
          <BorderBox7 class="col" style="height: 314px;background-color: #001925;"></BorderBox7>
          <BorderBox7 class="col" style="height: 640px;background-color: #001925;"></BorderBox7>

        </div>
      </div>
    </div>
    <!-- </FullScreenContainer> -->
  </div>
</template>

<style scoped>
.scale-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 50%;
  transform: scale(var(--scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  will-change: scale;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
</style>
